import "./index.css";
import {useState} from 'react';
import { componentsList } from "../../components/index";

export const Material = () => {

  const [isDragging, setIsDragging] = useState(false);

  const handleDragStart = (e, name) => {
    console.log('>>>', e, name);
    e.dataTransfer.setData("text/plain", name);
    setIsDragging(true);
  }

  const handleDragEnd = () => {
    setIsDragging(false)
  }

  return (
    <div className="material-container">
      <div>组件区</div>
      <div>
        {componentsList.map((item) => (
          <div
            draggable
            className="material-item"
            onDragStart={(e) => handleDragStart(e, item.name)}
            onDragEnd={handleDragEnd}
          >
            {item.name}
          </div>
        ))}
      </div>
    </div>
  );
};
